<template>
    <div class="flexbox flexcolumn height_100">
        <AddProUser />
        <div class="flex over_box">
            <el-form label-position='left' label-width="100px" size="small" :model="addProjectForm" :hide-required-asterisk='true' ref="addProjectForm" :rules="addProjectRules" class="add_form">
                <div class="com_box pd_box">
                    <div class="pro_title">基础信息</div>
                    <el-form-item label="项目所属" prop="name">
                        <div class="pro_text">
                            {{filters.chanelName2(channel)}}
                            -
                            {{filters.sceneFilter(addProjectForm.type)}}
                        </div>
                    </el-form-item>
                    <el-form-item label="项目">
                        <div class="flexbox flexcenter">
                            <el-form-item prop="brand_id" :rules="{required: true, message: '请选择品牌', trigger: ['blur', 'change']}">
                                <el-select v-model="addProjectForm.brand_id" filterable placeholder="请选择品牌" style="width:220px" @change="selectBrand">
                                    <el-option :label="item.full_name" :value="item.id" v-for="item in brandList" :key="item"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="product_id" :rules="{required: true, message: '请选择产品', trigger: ['blur', 'change']}" style="margin-left:20px">
                                <el-select v-model="addProjectForm.product_id" filterable :disabled="!addProjectForm.brand_id" placeholder="请选择产品" style="width:220px">
                                    <el-option :label="item.name" :value="item.id" v-for="item in productList" :key="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form-item>
                </div>
                <div class="com_box pd_box">
                    <div class="pro_title">项目等级</div>
                     <el-form-item label="等级">
                        <div class="flexbox flexcenter">
                            <el-form-item prop="level" :rules="{required: true, message: '请选择项目等级', trigger: ['blur', 'change']}">
                                <el-select v-model="addProjectForm.level" filterable placeholder="未设置" style="width:220px" >
                                    <el-option :label="item.name" :value="item.id" v-for="item in levelList" :key="item"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form-item>
                </div>
                <div class="com_box pd_20 mb_12">
                    <div class="head_stra flexbox flexcenter">
                        <div class="has_check flexbox flexcenter flexbetween" v-if="hasPlanData.length>0">
                            <div class="has_ch_left">
                                <span class="has_text">已选中{{hasPlanData.length}}项</span>
                                <span class="has_btn" @click="batchDeletPlan">删除</span>
                            </div>
                            <div class="close_check" @click="closeHasPlanCheck">
                                <img src="../../assets/img/close_check.svg" alt="">
                            </div>
                        </div>
                        <div class="flexbox flex flexcenter flexbetween" v-else>
                            <div class="pro_title">绑定账户</div>
                            <el-button plain class="plain_blue" icon="el-icon-circle-plus-outline" size="small" @click="addProUser(2)">添加账户</el-button>
                        </div>
                    </div>
                    <el-table :data="addProjectForm.advertiser" ref="planRef" max-height="300" class="com_table" :row-key="(row)=>{ return row.id}" @selection-change="selectGroup">
                        <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                            <img src="../../assets/img/null_icon.svg" alt="">
                            <div class="font_13 color_03">暂无数据</div>
                        </div>
                        <el-table-column type="selection" width="55" align="center" :reserve-selection="true">
                        </el-table-column>
                        <el-table-column prop="advertiser_id" label="账户ID" width="250">
                        </el-table-column>
                        <el-table-column prop="name" label="账户名称">
                        </el-table-column>
                        <el-table-column prop="stat_cost" label="操作" width="88">
                            <template slot-scope="scope">
                                <el-link type="danger" :underline="false" @click="deletPlan(scope.$index)">删除</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- <el-form-item label="" prop="advertiser" style="margin-bottom:0" :rules="{required: true, message: '请选择账户', trigger: ['blur', 'change']}"></el-form-item> -->
                </div>

                <div class="com_box pd_box">
                    <div class="pro_title">项目人员设置</div>
                    <el-form-item label="业务地区" prop="name">
                        <div class="region_list flexbox flexcenter">
                            <div class="region_item tab_style" :class='{active:region==1}' @click="selectCity(1)">深圳</div>
                            <div class="region_item tab_style" :class='{active:region==2}' @click="selectCity(2)">杭州</div>
                        </div>
                    </el-form-item>
                    <div v-if="region==1" key="1">
                        <el-form-item label="添加人员" prop="name">
                            <div class="member_set">
                                <div class="flexbox flexcenter">
                                    <div class="member_item">
                                        <div class="member_text">执行人（可多选）</div>
                                        <el-form-item :prop="`shenzhen.executor`" :rules="{required: true, message: '请选择执行人', trigger: ['blur', 'change']}">
                                            <el-select v-model="addProjectForm.shenzhen.executor" multiple collapse-tags filterable placeholder="请选择" style="width:220px">
                                                <el-option :label="item.nickname" :value="item.id" v-for="item in optimiList" :key="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <div class="member_item">
                                        <div class="member_text">PM</div>
                                        <el-form-item :prop="`shenzhen.pm`">
                                            <el-select v-model="addProjectForm.shenzhen.pm" placeholder="请选择" filterable style="width:220px">
                                                <el-option label="无" value=""></el-option>
                                                <el-option :label="item.nickname" :value="item.id" v-for="item in optimiList" :key="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <div class="member_item">
                                        <div class="member_text">内容PM</div>
                                        <el-form-item :prop="`shenzhen.cpm`">
                                            <el-select v-model="addProjectForm.shenzhen.cpm" placeholder="请选择" filterable style="width:220px">
                                                <el-option label="无" value=""></el-option>
                                                <el-option :label="item.nickname" :value="item.id" v-for="item in roleList" :key="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <!-- <div class="member_item">
                                        <div class="member_text">GPM</div>
                                        <el-form-item :prop="`shenzhen.gpm`">
                                            <el-select v-model="addProjectForm.shenzhen.gpm" placeholder="请选择" filterable style="width:220px">
                                                <el-option label="无" value=""></el-option>
                                                <el-option :label="item.nickname" :value="item.id" v-for="item in optimiList" :key="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div> -->
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                    <div v-else-if="region==2" key="2">
                        <el-form-item label="素材生产组" :prop="`hangzhou.group`" :rules="{required: true, message: '请选择项目组', trigger: ['blur', 'change']}">
                            <el-select v-model="addProjectForm.hangzhou.group" placeholder="请选择项目组" style="width:220px">
                                <el-option :label="item.name" :value="item.id" v-for="item in materialGroup" :key="item.id"></el-option>
                            </el-select>
                            <span style="font-size:13px;color:#B4B7BD;margin-left:12px">设置负责该素材生产的部门/组</span>
                        </el-form-item>
                        <el-form-item label="添加人员" prop="name">
                            <div class="member_set">
                                <div class="flexbox flexcenter">
                                    <div class="member_item">
                                        <div class="member_text">执行人（可多选）</div>
                                        <el-form-item :prop="`hangzhou.executor`" :rules="{required: true, message: '请选择执行人', trigger: ['blur', 'change']}">
                                            <el-select v-model="addProjectForm.hangzhou.executor" multiple collapse-tags filterable placeholder="请选择" style="width:220px">
                                                <el-option :label="item.nickname" :value="item.id" v-for="item in optimiList2" :key="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <div class="member_item">
                                        <div class="member_text">PM</div>
                                        <el-form-item :prop="`hangzhou.pm`">
                                            <el-select v-model="addProjectForm.hangzhou.pm" placeholder="请选择" filterable style="width:220px">
                                                <el-option label="无" value=""></el-option>
                                                <el-option :label="item.nickname" :value="item.id" v-for="item in optimiList2" :key="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <div class="member_item">
                                        <div class="member_text">CPM</div>
                                        <el-form-item :prop="`hangzhou.cpm`">
                                            <el-select v-model="addProjectForm.hangzhou.cpm" placeholder="请选择" filterable style="width:220px">
                                                <el-option label="无" value=""></el-option>
                                                <el-option :label="item.nickname" :value="item.id" v-for="item in roleList" :key="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <!-- <div class="member_item">
                                        <div class="member_text">GPM</div>
                                        <el-form-item :prop="`hangzhou.gpm`">
                                            <el-select v-model="addProjectForm.hangzhou.gpm" placeholder="请选择" filterable style="width:220px">
                                                <el-option label="无" value=""></el-option>
                                                <el-option :label="item.nickname" :value="item.id" v-for="item in optimiList2" :key="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div> -->
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                </div>
                <div class="com_box pd_box">
                    <div class="pro_title">项目盈利</div>
                    <el-form-item label="盈利金额" prop="project_profit" :rules="addProjectRules.checkFloat">
                        <el-input v-model="addProjectForm.project_profit" placeholder="请输入" style="width:120px">
                            <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                        </el-input>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="project_footer com_box flexbox flexcenter">
            <el-button type="primary" class="el-button-width" size="small" @click="submitForm('addProjectForm')" :loading="loading" :disabled='loading'>保存</el-button>
            <el-button class="el-button-width" size="small" plain @click="$router.go(-1)">返回</el-button>
        </div>
    </div>
</template>

<script>
import AddProUser from "./AddProUser";
export default {
    name: "",
    data() {
        return {
            loading: false,
            channel: 1,
            region: 1,
            hasPlanData: [],
            brandList: [], //品牌列表
            productList: [], //产品列表
            optimiList: [], //优化师列表-深圳
            optimiList2: [], //优化师列表-杭州
            roleList: [],//cpm人员选项
            materialGroup: [], //素材生产组
            bid: "",
            levelList:[
            {
                name:'T0',
                id:1
            },
            {
                name:'T1',
                id:2
            },
            {
                name:'T2',
                id:3
            },
            {
                name:'T3',
                id:4
            }],
            addProjectForm: {
                advertiser: [],
                channel: "",
                type: "",
                brand_id: "",
                level:"",
                product_id: "",
                shenzhen: {
                    gpm: "",
                    pm: "",
                    cpm:"",
                    executor: [],
                },
                hangzhou: {
                    gpm: "",
                    pm: "",
                    cpm:"",
                    executor: [],
                    group: "",
                },
                project_profit: "",
            },
            addProjectRules: {
                checkFloat: [
                    {
                        pattern:
                            /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                        required: true,
                        message: "请输入正确数值",
                        trigger: ["blur", "change"],
                    },
                ],
            },
        };
    },
    created() {
        this.channel = this.$route.query.channel;
        this.addProjectForm.channel = this.$route.query.channel;
        this.addProjectForm.type = this.$route.query.type;
        this.getDataList();
        this.getBrandList();
        this.getOptimization();
        this.getOptimization2();
        this.getMaterialGroup();
        this.getRoleList();
    },
    beforeDestroy() {},
    methods: {
          //获取员工列表
        async getRoleList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/findDEPList",
                {
                    query: "",
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.roleList = res.data;
            }
        },
        // 获取项目信息
        async getDataList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/sceneFind",
                {
                    sid: this.$route.query.sid,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.addProjectForm = res.data;
                res.data.level ? this.addProjectForm : this.addProjectForm.level  = '';
                this.getProductList();
            }
        },

        //获取品牌列表
        async getBrandList() {
            const { data: res } = await this.$http.post(
                "adminapi/brand/brandSelect",
                {
                    channel: this.channel,
                    page: 1,
                    limit: 0,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.brandList = res.data.list;
            }
        },

        // 获取产品
        async getProductList() {
            const { data: res } = await this.$http.post(
                "adminapi/brand/productSelect",
                {
                    bid: this.addProjectForm.brand_id,
                    page: 1,
                    limit: 0,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.productList = res.data.list;
            }
        },

        // 品牌选择
        selectBrand() {
            this.addProjectForm.product_id = "";
            this.getProductList();
        },

        // 获取素材生产组
        async getMaterialGroup() {
            const { data: res } = await this.$http.post(
                "adminapi/project/materialGroup"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.materialGroup = res.data;
            }
        },

        // 获取优化师列表
        async getOptimization() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szOptimizerList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.optimiList = res.data;
            }
        },

        // 获取优化师列表
        async getOptimization2() {
            const { data: res } = await this.$http.post(
                "adminapi/company/hzOptimizerList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.optimiList2 = res.data;
            }
        },

        // 添加账户
        addProUser(type) {
            const attr = {
                dialogVsb: true,
                planData: this.addProjectForm.advertiser,
                type: type,
            };
            this.$bus.emit("addProUser", attr);
        },

        // 删除账户
        deletPlan(index) {
            this.addProjectForm.advertiser.splice(index, 1);
        },

        // 批量删除账户
        batchDeletPlan() {
            for (let i in this.addProjectForm.advertiser) {
                for (let a in this.hasPlanData) {
                    if (
                        this.addProjectForm.advertiser[i].advertiser_id ==
                        this.hasPlanData[a].advertiser_id
                    ) {
                        this.addProjectForm.advertiser.splice(i, 1);
                    }
                }
            }
            this.hasPlanData = [];
            this.$refs.planRef.clearSelection();
        },

        // 选择账户
        selectGroup(v) {
            this.hasPlanData = v;
        },

        // 关闭已选账户
        closeHasPlanCheck() {
            this.hasPlanData = [];
            this.$refs.planRef.clearSelection();
        },

        // 城市选择
        selectCity(index) {
            this.region = index;
        },

        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                console.log(valid)
                if (valid) {
                    this.loading = true;
                    let subForm = {
                        sid: this.$route.query.sid,
                        channel: this.addProjectForm.channel,
                        type: this.addProjectForm.type,
                        level:this.addProjectForm.level,
                        brand_id: this.addProjectForm.brand_id,
                        product_id: this.addProjectForm.product_id,
                        shenzhen: this.addProjectForm.shenzhen,
                        hangzhou: this.addProjectForm.hangzhou,
                        advertiser: this.addProjectForm.advertiser.map(
                            (item) => {
                                return item.advertiser_id;
                            }
                        ),
                        project_profit: this.addProjectForm.project_profit,
                    };
                    const { data: res } = await this.$http.post(
                        "adminapi/project/sceneEdit",
                        subForm
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.loading = false;
                        return;
                    } else {
                        this.$message({
                            message: "保存成功！",
                            type: "success",
                        });
                        this.loading = false;
                        this.$router.go(-1);
                    }
                } else {
                    this.loading = false;
                    return false;
                }
            });
        },
    },
    components: {
        AddProUser,
    },
};
</script>


<style scoped>
.project_footer {
    padding: 0 20px;
    height: 72px;
}
.pd_box {
    padding: 0 20px;
    overflow: hidden;
    margin-bottom: 12px;
}
.pro_title {
    font-weight: bold;
    font-size: 16px;
    height: 56px;
    line-height: 56px;
}
.pro_text {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #17233d;
}
.member_set {
    border: 1px solid #dcdee2;
    padding: 20px;
    border-radius: 6px;
}
.member_text {
    font-size: 13px;
    color: #17233d;
    line-height: 13px;
    margin-bottom: 12px;
}
.member_item {
    margin-bottom: 12px;
    margin-right: 16px;
}
.condition_box {
    background-color: #f8f9fb;
    border-radius: 4px;
    padding: 0 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.cond_item {
    padding: 12px 0;
}
.region_item {
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    font-size: 14px;
    color: #616c85;
    margin-top: -5px;
}
.region_item.active {
    color: #17233d;
}
</style>
<style>
.add_form .el-form-item__label {
    color: #616c85 !important;
}
.add_form .el-form-item__label {
    line-height: 16px !important;
    margin-top: 7px;
}
</style>

